<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

<h:head>
    <title>三一 - 问卷调查</title>
    <link href="../../css/component.css" rel="stylesheet" type="text/css"/>
    <style type="text/css">
        .old {
            font-weight: bold !important;
            background-image: none !important;
            color: #000000 !important;
        }
    </style>
    <script type="text/javascript" src="../../js/highcharts.js"></script>
    <script type="text/javascript" src="../../js/drawChart.js"></script>
</h:head>

<h:body>
    <ui:param name="bean" value="#{channelPayReportAction}"/>

    <span class="pagetitle">运营报表 —— 渠道累计付费</span>
    <p:separator/>

    <!-- 右侧页面顶部查询部分 -->
    <h:form id="fsearch">
        <h:outputLabel id="radioHide" value="#{bean.dateRadio}" style="visibility: hidden"/>

        <p:outputPanel id="customPanel" style="margin-bottom:10px">
            <p:selectOneRadio id="customRadio" value="#{bean.dateRadio}" layout="custom">
                <f:selectItem itemLabel="7" itemValue="7"/>
                <f:selectItem itemLabel="15" itemValue="15"/>
                <f:selectItem itemLabel="30" itemValue="30"/>
                <f:selectItem itemLabel="0" itemValue="0"/>
                <p:ajax update="radioHide customPanel :#{p:component('dform')}" listener="#{bean.radioChange}"/>
            </p:selectOneRadio>

            <h:panelGrid id="opt" columns="14" cellpadding="5">
                <p:radioButton id="opt1" for="customRadio" itemIndex="0"/>
                <h:outputLabel for="opt1" value="近7天"/>
                <h:outputLabel/>

                <p:radioButton id="opt2" for="customRadio" itemIndex="1"/>
                <h:outputLabel for="opt2" value="近15天"/>
                <h:outputLabel/>

                <p:radioButton id="opt3" for="customRadio" itemIndex="2"/>
                <h:outputLabel for="opt3" value="近30天"/>
                <h:outputLabel/>

                <p:radioButton id="opt4" for="customRadio" itemIndex="3"/>
                <h:outputLabel for="opt4" value="自定义 开始时间"/>
                <p:calendar value="#{bean.dateStart}" mode="popup" pattern="yyyy-MM-dd">
                    <p:ajax event="dateSelect" listener="#{bean.spinnerChange}" update=":#{p:component('dform')}"
                            onstart="return spinnered()"/>
                </p:calendar>
                <h:outputLabel for="opt4" value="结束时间"/>
                <p:calendar value="#{bean.dateEnd}" mode="popup" pattern="yyyy-MM-dd">
                    <p:ajax event="dateSelect" listener="#{bean.spinnerChange}" update=":#{p:component('dform')}"
                            onstart="return spinnered()"/>
                </p:calendar>
            </h:panelGrid>
        </p:outputPanel>
    </h:form>
    <br/>

    <!-- 数据展示部分，包含表格和图表 -->
    <h:form id="dform">
        <script type="text/javascript">
            $('body').on('click', '.column', function () {
                var selected = $(this).hasClass("highlight");
                $(".column").removeClass("highlight");
                if (!selected) {
                    $(this).addClass("highlight");
                }
            });
        </script>

        <div class="data" id="data">
            <p:panel id="panel2" header="详细数据" style="margin-bottom:10px;">
                <p:dataTable id="dlist2" var="l" frozenColumns="1" scrollable="true"
                             value="#{bean.channelPayDatas}" resizableColumns="true" paginator="true"
                             paginatorPosition="bottom"
                             paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown} {Exporters}"
                             rowsPerPageTemplate="15,30" rows="15" style="text-align:center;padding: 0;margin: 0;">
                    <f:facet name="{Exporters}">
                        <h:commandLink styleClass="exporter">
                            <p:graphicImage url="/resources/images/excel.png" height="25px"/>
                            <p:dataExporter type="xls" target="dlist2"
                                            fileName="channelPayDatas-#{pageHelper.getNewDateDetailStr()}"/>
                        </h:commandLink>
                    </f:facet>
                    <p:column headerText="日期" styleClass="column grcdate" sortBy="#{l.dateStr}">
                        <h:outputLabel value="#{l.dateStr}"/>
                    </p:column>
                    <p:column headerText="平台" styleClass="column grcplatform"
                              sortBy="#{pageHelper.getPlatformNameById(l.platformId)}">
                        <h:outputLabel value="#{pageHelper.getPlatformNameById(l.platformId)}"/>
                    </p:column>
                    <p:column headerText="渠道" styleClass="column grcchannel"
                              sortBy="#{pageHelper.getChannelNameById(l.channelId)}">
                        <h:outputLabel value="#{pageHelper.getChannelNameById(l.channelId)}"/>
                    </p:column>
                    <p:column headerText="新增帐号数" styleClass="column grcnewUser" sortBy="#{l.newUser}" rendered="false">
                        <h:outputLabel value="#{l.newUser}"/>
                    </p:column>
                    <p:column headerText="1日收入" styleClass="column grcnewUser" sortBy="#{l.income1}">
                        <h:outputLabel value="#{l.income1}"/>
                    </p:column>
                    <p:column headerText="2日收入" styleClass="column grcnewUser" sortBy="#{l.income2}">
                        <h:outputLabel value="#{l.income2}"/>
                    </p:column>
                    <p:column headerText="3日收入" styleClass="column grcnewUser" sortBy="#{l.income3}">
                        <h:outputLabel value="#{l.income3}"/>
                    </p:column>
                    <p:column headerText="4日收入" styleClass="column grcnewUser" sortBy="#{l.income4}">
                        <h:outputLabel value="#{l.income4}"/>
                    </p:column>
                    <p:column headerText="5日收入" styleClass="column grcnewUser" sortBy="#{l.income5}">
                        <h:outputLabel value="#{l.income5}"/>
                    </p:column>
                    <p:column headerText="6日收入" styleClass="column grcnewUser" sortBy="#{l.income6}">
                        <h:outputLabel value="#{l.income6}"/>
                    </p:column>
                    <p:column headerText="7日收入" styleClass="column grcnewUser" sortBy="#{l.income7}">
                        <h:outputLabel value="#{l.income7}"/>
                    </p:column>
                    <p:column headerText="8日收入" styleClass="column grcnewUser" sortBy="#{l.income8}">
                        <h:outputLabel value="#{l.income8}"/>
                    </p:column>
                    <p:column headerText="9日收入" styleClass="column grcnewUser" sortBy="#{l.income9}">
                        <h:outputLabel value="#{l.income9}"/>
                    </p:column>
                    <p:column headerText="10日收入" styleClass="column grcnewUser" sortBy="#{l.income10}">
                        <h:outputLabel value="#{l.income10}"/>
                    </p:column>
                    <p:column headerText="11日收入" styleClass="column grcnewUser" sortBy="#{l.income11}">
                        <h:outputLabel value="#{l.income11}"/>
                    </p:column>
                    <p:column headerText="12日收入" styleClass="column grcnewUser" sortBy="#{l.income12}">
                        <h:outputLabel value="#{l.income12}"/>
                    </p:column>
                    <p:column headerText="13日收入" styleClass="column grcnewUser" sortBy="#{l.income13}">
                        <h:outputLabel value="#{l.income13}"/>
                    </p:column>
                    <p:column headerText="14日收入" styleClass="column grcnewUser" sortBy="#{l.income14}">
                        <h:outputLabel value="#{l.income14}"/>
                    </p:column>
                    <p:column headerText="15日收入" styleClass="column grcnewUser" sortBy="#{l.income15}">
                        <h:outputLabel value="#{l.income15}"/>
                    </p:column>
                    <p:column headerText="16日收入" styleClass="column grcnewUser" sortBy="#{l.income16}">
                        <h:outputLabel value="#{l.income16}"/>
                    </p:column>
                    <p:column headerText="17日收入" styleClass="column grcnewUser" sortBy="#{l.income17}">
                        <h:outputLabel value="#{l.income17}"/>
                    </p:column>
                    <p:column headerText="18日收入" styleClass="column grcnewUser" sortBy="#{l.income18}">
                        <h:outputLabel value="#{l.income18}"/>
                    </p:column>
                    <p:column headerText="19日收入" styleClass="column grcnewUser" sortBy="#{l.income19}">
                        <h:outputLabel value="#{l.income19}"/>
                    </p:column>
                    <p:column headerText="20日收入" styleClass="column grcnewUser" sortBy="#{l.income20}">
                        <h:outputLabel value="#{l.income20}"/>
                    </p:column>
                    <p:column headerText="21日收入" styleClass="column grcnewUser" sortBy="#{l.income21}">
                        <h:outputLabel value="#{l.income21}"/>
                    </p:column>
                    <p:column headerText="22日收入" styleClass="column grcnewUser" sortBy="#{l.income22}">
                        <h:outputLabel value="#{l.income22}"/>
                    </p:column>
                    <p:column headerText="23日收入" styleClass="column grcnewUser" sortBy="#{l.income23}">
                        <h:outputLabel value="#{l.income23}"/>
                    </p:column>
                    <p:column headerText="24日收入" styleClass="column grcnewUser" sortBy="#{l.income24}">
                        <h:outputLabel value="#{l.income24}"/>
                    </p:column>
                    <p:column headerText="25日收入" styleClass="column grcnewUser" sortBy="#{l.income25}">
                        <h:outputLabel value="#{l.income25}"/>
                    </p:column>
                    <p:column headerText="26日收入" styleClass="column grcnewUser" sortBy="#{l.income26}">
                        <h:outputLabel value="#{l.income26}"/>
                    </p:column>
                    <p:column headerText="27日收入" styleClass="column grcnewUser" sortBy="#{l.income27}">
                        <h:outputLabel value="#{l.income27}"/>
                    </p:column>
                    <p:column headerText="28日收入" styleClass="column grcnewUser" sortBy="#{l.income28}">
                        <h:outputLabel value="#{l.income28}"/>
                    </p:column>
                    <p:column headerText="29日收入" styleClass="column grcnewUser" sortBy="#{l.income29}">
                        <h:outputLabel value="#{l.income29}"/>
                    </p:column>
                    <p:column headerText="30日收入" styleClass="column grcnewUser" sortBy="#{l.income30}">
                        <h:outputLabel value="#{l.income30}"/>
                    </p:column>
                    <p:column headerText="31日收入" styleClass="column grcnewUser" sortBy="#{l.income31}">
                        <h:outputLabel value="#{l.income31}"/>
                    </p:column>
                    <p:column headerText="32日收入" styleClass="column grcnewUser" sortBy="#{l.income32}">
                        <h:outputLabel value="#{l.income32}"/>
                    </p:column>
                    <p:column headerText="33日收入" styleClass="column grcnewUser" sortBy="#{l.income33}">
                        <h:outputLabel value="#{l.income33}"/>
                    </p:column>
                    <p:column headerText="34日收入" styleClass="column grcnewUser" sortBy="#{l.income34}">
                        <h:outputLabel value="#{l.income34}"/>
                    </p:column>
                    <p:column headerText="35日收入" styleClass="column grcnewUser" sortBy="#{l.income35}">
                        <h:outputLabel value="#{l.income35}"/>
                    </p:column>
                    <p:column headerText="36日收入" styleClass="column grcnewUser" sortBy="#{l.income36}">
                        <h:outputLabel value="#{l.income36}"/>
                    </p:column>
                    <p:column headerText="37日收入" styleClass="column grcnewUser" sortBy="#{l.income37}">
                        <h:outputLabel value="#{l.income37}"/>
                    </p:column>
                    <p:column headerText="38日收入" styleClass="column grcnewUser" sortBy="#{l.income38}">
                        <h:outputLabel value="#{l.income38}"/>
                    </p:column>
                    <p:column headerText="39日收入" styleClass="column grcnewUser" sortBy="#{l.income39}">
                        <h:outputLabel value="#{l.income39}"/>
                    </p:column>
                    <p:column headerText="40日收入" styleClass="column grcnewUser" sortBy="#{l.income40}">
                        <h:outputLabel value="#{l.income40}"/>
                    </p:column>
                    <p:column headerText="41日收入" styleClass="column grcnewUser" sortBy="#{l.income41}">
                        <h:outputLabel value="#{l.income41}"/>
                    </p:column>
                    <p:column headerText="42日收入" styleClass="column grcnewUser" sortBy="#{l.income42}">
                        <h:outputLabel value="#{l.income42}"/>
                    </p:column>
                    <p:column headerText="43日收入" styleClass="column grcnewUser" sortBy="#{l.income43}">
                        <h:outputLabel value="#{l.income43}"/>
                    </p:column>
                    <p:column headerText="44日收入" styleClass="column grcnewUser" sortBy="#{l.income44}">
                        <h:outputLabel value="#{l.income44}"/>
                    </p:column>
                    <p:column headerText="45日收入" styleClass="column grcnewUser" sortBy="#{l.income45}">
                        <h:outputLabel value="#{l.income45}"/>
                    </p:column>
                    <p:column headerText="46日收入" styleClass="column grcnewUser" sortBy="#{l.income46}">
                        <h:outputLabel value="#{l.income46}"/>
                    </p:column>
                    <p:column headerText="47日收入" styleClass="column grcnewUser" sortBy="#{l.income47}">
                        <h:outputLabel value="#{l.income47}"/>
                    </p:column>
                    <p:column headerText="48日收入" styleClass="column grcnewUser" sortBy="#{l.income48}">
                        <h:outputLabel value="#{l.income48}"/>
                    </p:column>
                    <p:column headerText="49日收入" styleClass="column grcnewUser" sortBy="#{l.income49}">
                        <h:outputLabel value="#{l.income49}"/>
                    </p:column>
                    <p:column headerText="50日收入" styleClass="column grcnewUser" sortBy="#{l.income50}">
                        <h:outputLabel value="#{l.income50}"/>
                    </p:column>
                    <p:column headerText="51日收入" styleClass="column grcnewUser" sortBy="#{l.income51}">
                        <h:outputLabel value="#{l.income51}"/>
                    </p:column>
                    <p:column headerText="52日收入" styleClass="column grcnewUser" sortBy="#{l.income52}">
                        <h:outputLabel value="#{l.income52}"/>
                    </p:column>
                    <p:column headerText="53日收入" styleClass="column grcnewUser" sortBy="#{l.income53}">
                        <h:outputLabel value="#{l.income53}"/>
                    </p:column>
                    <p:column headerText="54日收入" styleClass="column grcnewUser" sortBy="#{l.income54}">
                        <h:outputLabel value="#{l.income54}"/>
                    </p:column>
                    <p:column headerText="55日收入" styleClass="column grcnewUser" sortBy="#{l.income55}">
                        <h:outputLabel value="#{l.income55}"/>
                    </p:column>
                    <p:column headerText="56日收入" styleClass="column grcnewUser" sortBy="#{l.income56}">
                        <h:outputLabel value="#{l.income56}"/>
                    </p:column>
                    <p:column headerText="57日收入" styleClass="column grcnewUser" sortBy="#{l.income57}">
                        <h:outputLabel value="#{l.income57}"/>
                    </p:column>
                    <p:column headerText="58日收入" styleClass="column grcnewUser" sortBy="#{l.income58}">
                        <h:outputLabel value="#{l.income58}"/>
                    </p:column>
                    <p:column headerText="59日收入" styleClass="column grcnewUser" sortBy="#{l.income59}">
                        <h:outputLabel value="#{l.income59}"/>
                    </p:column>
                    <p:column headerText="60日收入" styleClass="column grcnewUser" sortBy="#{l.income60}">
                        <h:outputLabel value="#{l.income60}"/>
                    </p:column>
                    <p:column headerText="61日收入" styleClass="column grcnewUser" sortBy="#{l.income61}">
                        <h:outputLabel value="#{l.income61}"/>
                    </p:column>
                    <p:column headerText="62日收入" styleClass="column grcnewUser" sortBy="#{l.income62}">
                        <h:outputLabel value="#{l.income62}"/>
                    </p:column>
                    <p:column headerText="63日收入" styleClass="column grcnewUser" sortBy="#{l.income63}">
                        <h:outputLabel value="#{l.income63}"/>
                    </p:column>
                    <p:column headerText="64日收入" styleClass="column grcnewUser" sortBy="#{l.income64}">
                        <h:outputLabel value="#{l.income64}"/>
                    </p:column>
                    <p:column headerText="65日收入" styleClass="column grcnewUser" sortBy="#{l.income65}">
                        <h:outputLabel value="#{l.income65}"/>
                    </p:column>
                    <p:column headerText="66日收入" styleClass="column grcnewUser" sortBy="#{l.income66}">
                        <h:outputLabel value="#{l.income66}"/>
                    </p:column>
                    <p:column headerText="67日收入" styleClass="column grcnewUser" sortBy="#{l.income67}">
                        <h:outputLabel value="#{l.income67}"/>
                    </p:column>
                    <p:column headerText="68日收入" styleClass="column grcnewUser" sortBy="#{l.income68}">
                        <h:outputLabel value="#{l.income68}"/>
                    </p:column>
                    <p:column headerText="69日收入" styleClass="column grcnewUser" sortBy="#{l.income69}">
                        <h:outputLabel value="#{l.income69}"/>
                    </p:column>
                    <p:column headerText="70日收入" styleClass="column grcnewUser" sortBy="#{l.income70}">
                        <h:outputLabel value="#{l.income70}"/>
                    </p:column>
                    <p:column headerText="71日收入" styleClass="column grcnewUser" sortBy="#{l.income71}">
                        <h:outputLabel value="#{l.income71}"/>
                    </p:column>
                    <p:column headerText="72日收入" styleClass="column grcnewUser" sortBy="#{l.income72}">
                        <h:outputLabel value="#{l.income72}"/>
                    </p:column>
                    <p:column headerText="73日收入" styleClass="column grcnewUser" sortBy="#{l.income73}">
                        <h:outputLabel value="#{l.income73}"/>
                    </p:column>
                    <p:column headerText="74日收入" styleClass="column grcnewUser" sortBy="#{l.income74}">
                        <h:outputLabel value="#{l.income74}"/>
                    </p:column>
                    <p:column headerText="75日收入" styleClass="column grcnewUser" sortBy="#{l.income75}">
                        <h:outputLabel value="#{l.income75}"/>
                    </p:column>
                    <p:column headerText="76日收入" styleClass="column grcnewUser" sortBy="#{l.income76}">
                        <h:outputLabel value="#{l.income76}"/>
                    </p:column>
                    <p:column headerText="77日收入" styleClass="column grcnewUser" sortBy="#{l.income77}">
                        <h:outputLabel value="#{l.income77}"/>
                    </p:column>
                    <p:column headerText="78日收入" styleClass="column grcnewUser" sortBy="#{l.income78}">
                        <h:outputLabel value="#{l.income78}"/>
                    </p:column>
                    <p:column headerText="79日收入" styleClass="column grcnewUser" sortBy="#{l.income79}">
                        <h:outputLabel value="#{l.income79}"/>
                    </p:column>
                    <p:column headerText="80日收入" styleClass="column grcnewUser" sortBy="#{l.income80}">
                        <h:outputLabel value="#{l.income80}"/>
                    </p:column>
                    <p:column headerText="81日收入" styleClass="column grcnewUser" sortBy="#{l.income81}">
                        <h:outputLabel value="#{l.income81}"/>
                    </p:column>
                    <p:column headerText="82日收入" styleClass="column grcnewUser" sortBy="#{l.income82}">
                        <h:outputLabel value="#{l.income82}"/>
                    </p:column>
                    <p:column headerText="83日收入" styleClass="column grcnewUser" sortBy="#{l.income83}">
                        <h:outputLabel value="#{l.income83}"/>
                    </p:column>
                    <p:column headerText="84日收入" styleClass="column grcnewUser" sortBy="#{l.income84}">
                        <h:outputLabel value="#{l.income84}"/>
                    </p:column>
                    <p:column headerText="85日收入" styleClass="column grcnewUser" sortBy="#{l.income85}">
                        <h:outputLabel value="#{l.income85}"/>
                    </p:column>
                    <p:column headerText="86日收入" styleClass="column grcnewUser" sortBy="#{l.income86}">
                        <h:outputLabel value="#{l.income86}"/>
                    </p:column>
                    <p:column headerText="87日收入" styleClass="column grcnewUser" sortBy="#{l.income87}">
                        <h:outputLabel value="#{l.income87}"/>
                    </p:column>
                    <p:column headerText="88日收入" styleClass="column grcnewUser" sortBy="#{l.income88}">
                        <h:outputLabel value="#{l.income88}"/>
                    </p:column>
                    <p:column headerText="89日收入" styleClass="column grcnewUser" sortBy="#{l.income89}">
                        <h:outputLabel value="#{l.income89}"/>
                    </p:column>
                    <p:column headerText="90日收入" styleClass="column grcnewUser" sortBy="#{l.income90}">
                        <h:outputLabel value="#{l.income90}"/>
                    </p:column>
                </p:dataTable>
            </p:panel>
        </div>
    </h:form>

    <!-- 页脚 -->
    <div class="footer"></div>
</h:body>
</html>